<script>
import RadarChart from "@/components/RadarChart.vue";
import Exam from "@/components/Exam.vue";
import FloatBtn from "@/components/FloatBtn.vue";

export default {
  components: {
    RadarChart,
    Exam,
    FloatBtn
  }
}
</script>

<template>
  <div>
    <float-btn/>
    <div class="row">
      <div class="col-12">
        <div class="row">
          <div class="col-lg-8">
            <card>
              <div class="row" style="height: 20rem">
                <div class="col-lg-4" style="width:15rem;height: 15rem;margin-top: 2rem">
                  <h2>你好，超大星</h2>
                  <h2>;-)</h2>
                  <h4>昨天学习很努力，今天也要继续加油</h4>
                  <p class="text-primary">不积跬步，无以至千里</p>
                </div>
                <div class="col-lg-8" style="height: 10rem">
                  <radar-chart></radar-chart>
                </div>
              </div>
            </card>
          </div>
          <div class="col-lg-4">
            <card>
              <div style="height: 20rem">
                <h3 class="card-title"> 错题重做</h3>
                <exam/>
              </div>
            </card>
          </div>
        </div>
        <card>
          <div style="height: auto;">
            <h3 class="card-title"><i class="tim-icons icon-triangle-right-17 "></i> 网课资源</h3>
            <div class="row">
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
            </div>
          </div>
        </card>
        <card>
          <div style="height: auto;">
            <h3 class="card-title"><i class="tim-icons icon-pencil"></i> 习题库</h3>
            <div class="row">
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
            </div>
          </div>
        </card>
        <card>
          <div style="height: auto;">
            <h3 class="card-title"><i class="tim-icons icon-puzzle-10"></i> 辅学资源</h3>
            <div class="row">
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
              <div class="col-lg-4">
                <card class="card" style="width: 90%;margin: auto;">
                  <a href="#/detail" target="_blank">
                    <img slot="image" class="card-img-top"
                         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1664f761b63%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1664f761b63%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.203125%22%20y%3D%2297.35%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                         alt="Card image cap"
                    >
                    <p class="card-text description">一些快速的示例文本，以卡片标题为基础，组成卡片的大部分内容。</p>
                  </a>
                </card>
              </div>
            </div>
          </div>
        </card>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}

radar-chart {
  margin: auto;
  height: 15rem !important;
  display: block;
}

.description {
  margin-top: 1rem;
}
</style>
